<template>
	<view class="port-detail">
		<!-- 使用率 -->
		<view class="port-usage">
			<view class="usage-text">U位使用率</view>
			<view class="usage-value">
				<text class="value-num">{{occupyRate}}</text>
				<text class="value-unit">%</text>
			</view>
		</view>
		<!-- 设备端口图 -->
		<view class="device-uno-box" :style="{ height: scaleObj.deviceHeight + 'px' }">
			<view v-if="rackUnoList.length" class="device-scale-box" :style="{ width: scaleObj.deviceWidth + 'px', transform: 'scale(' + scaleObj.scale + ')' }">
				<view class="cabinet-item" v-for="item in rackUnoList" :key="item.unoIndex">
					<view class="cabinet-area">
						<view class="cabinet-left">
							<view class="circle-icon"></view>
							<view class="circle-icon"></view>
						</view>
						<view class="cabinet-side-border"></view>
						<view class="cabinet-middle">
							<view class="model-container">
								<image
									v-if="item.deviceInfo"
									class="model-bg"
									:style="{ height: item.deviceInfo.unoIndexList.length * 50 + 'px' }"
									:src="baseUrl + item.deviceInfo.imageUrl"
									mode="widthFix"
								/>
								<view v-else class="empty-cabinet"></view>
							</view>
						</view>
						<view class="cabinet-side-border"></view>
						<view class="cabinet-right">
							<view class="circle-icon"></view>
							<view class="circle-icon"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 全屏按钮 -->
			<view class="full-screen" @click="handleFullScreen()">
				<image class="screen-icon" src="../../static/images/device/full_screen.png" mode=""></image>
				全屏
			</view>
		</view>
		<!-- 全屏插槽 -->
		<view v-show="showFull" class="full-box">
			<view class="device-name">{{ deviceData.name }}</view>
			<view class="full-content">
				<view
					v-if="rackUnoList.length"
					class="device-scale-box"
					:style="{ width: fullObj.deviceWidth + 'px', height: fullObj.deviceHeight + 'px', transform: 'scale(' + fullObj.scale + ')' }"
				>
					<view class="cabinet-item" v-for="item in rackUnoList" :key="item.unoIndex">
						<view class="cabinet-area">
							<view class="cabinet-left">
								<view class="circle-icon"></view>
								<view class="circle-icon"></view>
							</view>
							<view class="cabinet-side-border"></view>
							<view class="cabinet-middle">
								<view class="model-container">
									<image
										v-if="item.deviceInfo"
										class="model-bg"
										:style="{ height: item.deviceInfo.unoIndexList.length * 50 + 'px' }"
										:src="baseUrl + item.deviceInfo.imageUrl"
										mode="widthFix"
									/>
									<view v-else class="empty-cabinet"></view>
								</view>
							</view>
							<view class="cabinet-side-border"></view>
							<view class="cabinet-right">
								<view class="circle-icon"></view>
								<view class="circle-icon"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="scale-screen" @click="handleScaleScreen()">
				<image class="screen-icon" src="../../static/images/device/exit_screen.png" mode=""></image>
				返回
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, toRefs, watch, onMounted } from 'vue';
import config from '@/config.js'; // 配置文件
import { getDeviceRack } from '@/service/device.js';

// 懒加载图片
const getImageUrl = (name) => {
	return `../../static/images/port/${name}.png`;
};

const $props = defineProps({
	deviceInfo: {
		type: Object,
		default: () => {}
	}
});

watch(
	() => $props.deviceInfo,
	(newVal) => {
		if (newVal) {
			state.deviceData = newVal;
			handleScale();
		}
	}
);

const state = reactive({
	baseUrl: '',
	deviceData: {},
	windowWidth: 0,
	//正常缩放
	scaleObj: {
		deviceWidth: 500,
		deviceHeight: 50,
		scale: 1
	},
	//全屏缩放
	fullObj: {
		deviceWidth: 500,
		deviceHeight: 50,
		scale: 1
	},
	rackUnoList: [],//U位列表
	showFull: false,
	occupyRate: 0 //占用率
});
const { baseUrl, deviceData, scaleObj, rackUnoList, fullObj, showFull, occupyRate } = toRefs(state);

onMounted(() => {
	//生产环境
	// #ifdef APP
	state.baseUrl = config.base_url;
	// #endif
	// 开发环境，代理
	// #ifndef APP
	state.baseUrl = '/dev-api';
	// #endif
});

//根据设备尺寸缩放端口图显示比例
const handleScale = () => {
	setTimeout(() => {
		uni.getSystemInfo({
			success: (res) => {
				state.windowWidth = res.windowWidth;
				let paddingWidth = (50 / 375) * state.windowWidth;
				let curWidth = state.windowWidth - paddingWidth; //屏幕宽度减去padding等，计算模型图实际占据宽度
				state.scaleObj.deviceWidth = 544;
				state.scaleObj.scale = curWidth / state.scaleObj.deviceWidth;
				getRackUnoList();
			}
		});
	}, 200);
};

//获取机柜插槽信息
const getRackUnoList = () => {
	let rack = state.deviceData;
	let unoNum = rack.deviceRackUnoList.length;
	state.scaleObj.deviceHeight = unoNum * 51 * state.scaleObj.scale;
	let {newList, occupyUnoNum} = handleRackUno(rack.deviceRackUnoList, rack.deviceModelRack.sort); //处理设备占用多U位的情况
	newList = rack.deviceModelRack.sort == 1 ? newList : newList.reverse(); //判断机柜是否反序
	state.rackUnoList = newList;
	//计算U位占用率
	state.occupyRate = occupyUnoNum?(occupyUnoNum/unoNum*100).toFixed(2) : 0
};

//处理设备占用多U位的情况
const handleRackUno = (rackUnoList, sort) => {
	let newList = [], occupyUnoNum = 0
	for (let i = 0, len = rackUnoList.length; i < len; i++) {
		//判断是否反序
		if (sort == 2 && rackUnoList[i].deviceInfo) {
			rackUnoList[i].deviceInfo.unoIndexList = rackUnoList[i].deviceInfo.unoIndexList.reverse();
		}
		if (i == 0 || !rackUnoList[i].deviceInfo) {
			newList.push(rackUnoList[i]);
		} else {
			let curUno = rackUnoList[i].deviceInfo;
			let preUno = rackUnoList[i - 1].deviceInfo;

			if (!preUno || curUno.id != preUno.id || curUno.deviceType != preUno.deviceType) {
				newList.push(rackUnoList[i]);
			}
		}
		if(rackUnoList[i].deviceInfo){
			occupyUnoNum++
		}
	}
	return {newList, occupyUnoNum};
};

//计算全屏宽高
const handleFullScreen = () => {
	let paddingWidth = (20 / 375) * state.windowWidth;
	let curWidth = state.windowWidth - paddingWidth; //屏幕宽度减去padding等，计算模型图实际占据宽度
	state.fullObj.deviceWidth = 544;
	state.fullObj.scale = curWidth / state.fullObj.deviceWidth;
	let unoNum = state.deviceData.deviceRackUnoList.length;
	state.fullObj.deviceHeight = unoNum * 51 * state.fullObj.scale;
	state.showFull = true;
};

//全屏返回
const handleScaleScreen = () => {
	state.showFull = false;
};
</script>

<style lang="scss" scoped>
.port-detail {
	width: 100%;
	.port-usage {
		box-sizing: border-box;
		width: 100%;
		height: 114rpx;
		padding: 0 37rpx;
		background: #f3f8ff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		.usage-text {
			font-size: 24rpx;
			color: #282d3f;
		}
		.usage-value {
			color: #2c5ae9;
			font-weight: bold;
			.value-num {
				font-size: 60rpx;
			}
			.value-unit {
				font-size: 28rpx;
			}
		}
	}
	.device-uno-box,
	.full-box {
		background-color: #e0e4eb;
		.device-scale-box {
			transform-origin: 0% 0%;
			.cabinet-item {
				width: 100%;
				display: flex;
				align-items: center;
				.cabinet-area {
					display: flex;
					background: #000;
					.cabinet-left,
					.cabinet-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						width: 20px;
						background: #7c89a6;
						.circle-icon {
							margin: auto;
							width: 6px;
							height: 6px;
							border-radius: 3px;
							background-color: #000000;
						}
					}

					.cabinet-side-border {
						width: 2px;
						background: linear-gradient(90deg, #7c89a6 0%, #b3bed2 100%);
					}

					.cabinet-middle {
						width: 500px;
						background: linear-gradient(180deg, #2b303d 0%, #3b414e 100%);
						border: 1px solid #16191f;
						&:hover {
							border: 1px solid #fff;
						}
						.model-container {
							width: 500px;
							position: relative;
							.model-bg {
								width: 100%;
								display: block;
								z-index: 1;
							}
							.empty-cabinet {
								width: 100%;
								height: 50px;
								position: relative;
							}
						}
					}
				}
			}
		}
		.full-screen,
		.scale-screen {
			width: 144rpx;
			height: 66rpx;
			background: #ffffff;
			box-shadow: 0rpx -3rpx 25rpx 0rpx rgba(25, 67, 124, 0.09);
			border-radius: 8rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.6);
			font-size: 23rpx;
			color: #282d3f;
			display: flex;
			justify-content: center;
			align-items: center;
			.screen-icon {
				display: block;
				width: 30rpx;
				height: 30rpx;
				margin-right: 18rpx;
			}
		}
	}
	.device-uno-box {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		border-radius: 4rpx;
		margin-bottom: 40rpx;
		position: relative;
		.full-screen {
			position: absolute;
			top: 16rpx;
			right: 16rpx;
		}
	}
	.full-box {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 50rpx 0 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		.device-name {
			height: 65rpx;
			padding: 0 20rpx;
			font-size: 41rpx;
			color: #262d37;
			font-weight: bold;
			line-height: 65rpx;
			margin-bottom: 20rpx;
		}
		.full-content {
			width: 100%;
			height: calc(100% - 85rpx);
			padding: 0 20rpx;
			overflow-y: auto;
			overflow-x: hidden;
		}
		.scale-screen {
			position: fixed;
			right: 20rpx;
			bottom: 50rpx;
		}
	}
}
</style>
